<template>
	<div
		class="profile-stats-item flex flex-col items-center py-3 rounded-lg bg-bg-3 text-center app-bg-react">
		<BaseImage class="size-8" :src="img" />
		<div class="h-2" />
		<BaseText class="text-sm text-t-2" :text="title" :textT="titleT" />
		<div class="text-lg">
			<slot>
				<div v-if="value === null || value === undefined">~</div>
				<BaseAmount
					v-else-if="type === 'amount'"
					:value="value"
					:currency="CurrencyFiatEnum.USD"
					:currencyTo="CurrencyFiatEnum.USD"
					:showSymbol="false" />
				<div v-else-if="type === 'odds'">{{ fmtOdds(value) }}</div>
				<div v-else-if="type === 'number'">{{ fmtNum(value) }}</div>
				<div v-else>{{ value }}</div>
			</slot>
		</div>
	</div>
</template>

<script setup lang="ts">
import { BaseAmount, BaseImage, BaseText } from '@/components/base'
import { fmtNum, fmtOdds } from '@/utils'
import { PropType } from 'vue'
import { CurrencyFiatEnum } from '@/enums'

defineProps({
	img: {
		type: String,
		default: ''
	},
	title: {
		type: String,
		default: ''
	},
	titleT: {
		type: String,
		default: ''
	},
	value: {
		type: [String, Number]
	},
	type: {
		type: String as PropType<'amount' | 'odds' | 'number'>,
		default: 'number'
	}
})
</script>

<style scoped></style>
